<template>
	<view>
		<view style="margin-top:80upx">
			<view v-for="(item,index) in leaveArr" :key="index">
				<view v-if="index%2" class="indexTeacher" @click="leaveIndexSkip(item)">
					<view style="margin-left:60rpx;font-size: 38rpx;">
						{{item.className}}
					</view>
					<view style="margin-right:20upx; font-size:24upx">
						{{item.classroom || ''}} <span v-show="item.isShow"
							class="iconfont icon-xiajiantou"></span><span v-show="!item.isShow"
							class="iconfont icon-youjiantou">></span>
					</view>
				</view>
				<view v-else class="indexTeacher0" @click="leaveIndexSkip(item)">
					<view style="margin-left:60rpx;font-size: 38rpx;">
						{{item.className}}
					</view>
					<view style="margin-right:20upx; font-size:32rpx">
						{{item.classroom || ''}} <span v-show="item.isShow"
							class="iconfont icon-xiajiantou"></span><span v-show="!item.isShow"
							class="iconfont icon-youjiantou">></span>
					</view>
				</view>
				<view class="timePos" v-show="item.isShow">
					<view style="display: flex; justify-content: space-around;margin-left:32rpx">
						<span style="color:#8F8F94;">
							班级整体卫生情况
						</span>
						<button class="leaveBtn" @click="clearBtn(item)">提交</button>
					</view>
					<view style="display: flex; justify-content: space-around;margin-top:20rpx">
						<button @click="healthSlec(item,1)"
							:class="[{'attBtnFontSlec':item.type==1},'clearBtn']">优秀</button>
						<button @click="healthSlec(item,2)"
							:class="[{'attBtnFontSlec':item.type==2},'clearBtn']">良好</button>
						<button @click="healthSlec(item,3)"
							:class="[{'attBtnFontSlec':item.type==3},'clearBtn']">差</button>
					</view>
				</view>
			</view>
		</view>
		<view class="logoSty"></view>
	</view>
</template>

<script>
	import teachClass from "@/api/modules/teachClass.js"
	export default {
		name: 'leveRegistration',
		data() {
			return {
				type: 0,
				userName: '',
				topName: '卫生登记',
				id: '',
				leaveArr: [{
					icon: '',
					className: 'Y34',
					classroom: '明智楼201',
					isShow: false,
					healthArr: [{
						type: '优秀',
						isShow: false,
					}, {
						type: '良好',
						isShow: false,
					}, {
						type: '差',
						isShow: false,
					}]
				}, {
					icon: '',
					className: 'Y36',
					classroom: '明智楼211',
					isShow: false,
					healthArr: [{
						type: '优秀',
						isShow: false,
					}, {
						type: '良好',
						isShow: false,
					}, {
						type: '差',
						isShow: false,
					}]
				}, {
					icon: '',
					className: 'Y38',
					classroom: '明智楼212',
					isShow: false,
					healthArr: [{
						type: '优秀',
						isShow: false,
					}, {
						type: '良好',
						isShow: false,
					}, {
						type: '差',
						isShow: false,
					}]
				}, {
					icon: '',
					className: 'Y40',
					classroom: '明智楼221',
					isShow: false,
					healthArr: [{
						type: '优秀',
						isShow: false,
					}, {
						type: '良好',
						isShow: false,
					}, {
						type: '差',
						isShow: false,
					}]
				}, ],
				createData: null,
				timeSlot: 1,
				hyId: 0,
			}
		},
		onLoad() {
			var that = this
			uni.getStorage({
				key: "loginName",
				success: (res) => {
					that.userName = res.data
				}
			})
			uni.getStorage({
				key: "loginId",
				success: (res) => {
					that.id = res.data
				}
			})
		},
		mounted() {
			this.getClassData()
		},
		methods: {
			// 获取班级列表
			getClassData() {
				let timeNow = new Date();
				// 获取当前小时
				let hours = timeNow.getHours();
				// 判断当前时间段
				if (hours >= 0 && hours <= 12) {
					this.timeSlot = 1
				} else if (hours > 12 && hours <= 18) {
					this.timeSlot = 2
				} else if (hours > 18 && hours <= 24) {
					this.timeSlot = 3
				}
				this.$api.teacher.tecClassList(this.id).then(res => {
					this.leaveArr = res.data
					this.leaveArr.forEach(item => {
						item.isShow = false
						item.type = 0
						item.id = 0
					})
				}).catch(e => {


				})
			},
			// 提交班级卫生
			createClassHygiene(classId, className, item) {
				this.$api.teacher.createClassHygiene(this.$date, classId, className, this.userName, this.timeSlot, item
					.type, item.id).then(res => {
					uni.showToast({
						title: "提交成功"
					})
					this.getAppClaHyByCId(item.classId, item)
				}).catch(e => {

				})
			},
			// 显示班级卫生
			getAppClaHyByCId(classId, item) {
				this.createData = null
				this.$api.teacher.getAppClaHyByCId(this.$date, classId, this.timeSlot).then(res => {
					if (res.data) {
						item.type = res.data.grade
						this.type = res.data.id
						item.id = res.data.id
						this.createData = res.data
						this.$forceUpdate()
					}
				}).catch(e => {



				})
			},
			clearBtn(item) {
				console.log(item.type, "tupe")
				this.createClassHygiene(item.classId, item.className, item)

			},
			leaveIndexSkip(item) {
				this.$forceUpdate()
				item.isShow = !item.isShow
				if (item.isShow == true) {
					this.getAppClaHyByCId(item.classId, item)
				}


			},
			healthSlec(item, status) {
				this.$forceUpdate()
				if (status == 1) {
					item.type = 1
				} else if (status == 2) {
					item.type = 2
				} else {
					item.type = 3
				}
			}
		}
	}
</script>

<style>
	.attBtnFontSlec {
		border: solid #007AFF !important;
		border-radius: 15upx;
		font-size: 20upx;
		color: white !important;
		background-color: #007AFF;
	}

	.clearBtn {
		width: 140rpx;
		height: 60rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #808080;
		display: inline-table;
	}

	.timePos {
		position: relative;
		top: 0rpx;
		right: -56rpx;
		background: white;
		border: 1px solid #cccc;
		border-radius: 20rpx;
		padding: 20rpx;
		width: 568rpx;
		margin-bottom: 20rpx;
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		background-repeat: no-repeat;
		width: 190upx;
		height: 60upx;
		color: white;
		font-size: 26upx;
		font-weight: 0;
	}

	.indexTeacher {
		margin: auto;
		margin-top: 40upx;
		width: 605upx;
		height: 72upx;
		display: flex;
		justify-content: space-between;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/T-4.png);
		background-size: 100%;
		color: white;
		padding-top: 30upx;
		font-size: 32upx;
		/* opacity: 0.8; */
	}

	.indexTeacher0 {
		margin: auto;
		margin-top: 40upx;
		width: 605upx;
		height: 72upx;
		display: flex;
		justify-content: space-between;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/T-6.png);
		background-size: 100%;
		color: white;
		padding-top: 30upx;
		font-size: 32upx;
		/* opacity: 0.8; */
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexContent {
		height: unset !important;
	}
</style>